<template>
  <el-container>
    <el-aside width="215px">
      <el-menu
        default-active="2"
        class="daohanglan"
        background-color="#fff"
        text-color="#000"
        :router="true"
        :default-openeds="openList"
      >
        <div class="box1">
          <p>
            <span>智慧物业管理系统</span>
          </p>
        </div>
        <!-- <el-menu-item index="/Shouye">
          <i class="el-icon-setting"></i>
          <span slot="title" class="box12">首页</span>
        </el-menu-item> -->

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">资料管理</span>
          </template>
          <el-menu-item index="/Huishou">小区信息</el-menu-item>
          <el-menu-item index="/Duihuan">楼座信息</el-menu-item>
          <el-menu-item index="/Huishou">房屋信息</el-menu-item>
          <el-menu-item index="/Duihuan">住户信息</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">车行管理</span>
          </template>
          <el-menu-item index="/Kucun">区域管理</el-menu-item>
          <el-menu-item index="/Kucun">车位管理</el-menu-item>
          <el-menu-item index="/Kucun">车辆管理</el-menu-item>
          <el-menu-item index="/Kucun">月卡管理</el-menu-item>
          <el-menu-item index="/Kucun">停车缴费管理</el-menu-item>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">物业服务</span>
          </template>
          <el-menu-item index="/Qianbao">保修管理</el-menu-item>
          <el-menu-item index="/Qianbao">访客管理</el-menu-item>
          <el-menu-item index="/Qianbao">投诉管理</el-menu-item>
          <el-menu-item index="/Qianbao">活动管理</el-menu-item>
          <el-menu-item index="/Qianbao">公示管理</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">缴费管理</span>
          </template>
          <el-menu-item index="/Mendian">账单管理</el-menu-item>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span class="box11">设置</span>
          </template>
          <el-menu-item index="/Mendian">住户标签</el-menu-item>
          <el-menu-item index="/Mendian">投诉类型</el-menu-item>
          <el-menu-item index="/Mendian">员工管理</el-menu-item>
          <el-menu-item index="/Mendian">操作日志</el-menu-item>
          <el-menu-item index="/Mendian">个人信息</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <el-menu
          mode="horizontal"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <div style="float: right; height: 60px">
            <el-popover placement="top" width="200" v-model="visible">
              <p style="font-size:20px">退出系统</p>
              <p style="font-size:17px">请确认是否退出系统？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="medium" style="border: #409EFF 1px solid;width:80px" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button type="primary" style="width:80px" size="medium" @click="tuichu"
                  >退出</el-button
                >
              </div>
              <i class="el-icon-switch-button" slot="reference"></i>
            </el-popover>
            <span class="yhzw">{{this.userName}}</span>
          </div>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      openList: ["1"],
      visible: false,
      userId:'',
      userName:''
    };
  },
  mounted(){
    this.getUser()
  },
  methods: {
    getUser(){
      this.userId=sessionStorage.getItem("tid")
      this.userName=sessionStorage.getItem("tname")
    },
    tuichu() {
      sessionStorage.setItem("token",'')
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style scoped>
.el-header {
  padding: 0px 0px 0 0;
}
.daohanglan {
  width: 215px;
  border: none;
}
.box1 {
  height: 50px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-size: 20px;
  color: #001529;
}
.box11 {
  padding: 0 60px 0 0;
}
.box12 {
  padding: 0 85px 0 0;
}
.el-submenu {
  margin: 8px;
}
.el-main {
  padding: 0px 0px 0px 0px;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.el-icon-switch-button {
  font-size: 20px;
  color: #fff;
  margin: 20px 30px 0 0;
  cursor: pointer;
}
.yhzw {
  font-size: 17px;
  margin: 0px 40px 0 0;
  color: #fff;
}
</style>